<template>
	<div class="main">
		<el-container>
			<el-header class="tool_tip" height="40px" align="middle" justify="center">
				<div style="text-align: center; height: 40px; align: center; float: left">
					<img src="../assets/logo.png" style="margin-top: 10px; width: 16px; height: 16px" />
				</div>
				<div style="float: left; margin-left: 5px; font: bold 14px Helvetica; color: grary; padding-top: 11px">KVM Cloud</div>
				<div class="tooltip_status">{{ status }}</div>
				<div class="btn_ctr_alt_del" @click="on_send_ctrl_alt_del">发送 Ctrl+Alt+Del</div>
			</el-header>
			<el-main><div ref="vncContainer"></div></el-main>
			<el-footer class="footer" height="40px">
				<div></div>
			</el-footer>
		</el-container>
	</div>
</template>
    
<script>
import RFB from '@novnc/novnc/core/rfb'
import { getGuestVncPassword } from '@/api/api'
export default {
	name: 'VncView',
	inject: ['check_full_screen'],
	data() {
		return {
			id: 0,
			description: '',
			rfb: null,
			url: '',
			status: '连接中...'
		}
	},
	mounted() {
		this.check_full_screen(true)
		this.id = this.$route.query.id
		this.description = this.$route.query.description
		let protocol
		if (window.location.protocol === 'https:') {
			protocol = 'wss'
		} else {
			protocol = 'ws'
		}
		this.status = `正在连接[${this.description}]...`
		this.url = process.env.NODE_ENV === 'production' ? `${protocol}://${window.location.host}/api/vnc/${this.id}` : `${protocol}://localhost:8080/api/vnc/${this.id}`
		this.connect()
	},
	beforeDestroy() {
		this.check_full_screen(false)
	},
	methods: {
		connect() {
			getGuestVncPassword({ guestId: this.id }).then((res) => {
				if (res.code === 0) {
					const container = this.$refs.vncContainer
					this.rfb = new RFB(container, this.url, { credentials: { password: res.data } })
					this.rfb.addEventListener('connect', this.on_connect_success)
					this.rfb.addEventListener('disconnect', this.on_disconnect)
					this.rfb.addEventListener('credentialsrequired', this.on_required_password)
					this.rfb.scaleViewport = false
					this.rfb.resizeSession = true
				}
			})
		},
		on_connect_success() {
			this.status = `连接成功[${this.description}]`
		},
		on_disconnect(msg) {
			this.status = `远程连接已断开[${this.description}]`
			if (msg.detail.clean) {
				this.status = `正在重新连接[${this.description}]...`
				this.connect()
			}
		},
		on_required_password() {
			getGuestVncPassword({ guestId: this.id }).then((res) => {
				if (res.code === 0 && res.data) {
					this.rfb.sendCredentials({ password: res.data })
				}
			})
		},
		on_send_ctrl_alt_del() {
			this.rfb.sendCtrlAltDel()
			this.rfb.focus()
		},
		sendKey(keysym, code, down) {
			this.rfb.sendKey(keysym, code, down)
			this.rfb.focus()
		}
	}
}
</script>
    
    <style scoped>
.main {
	margin: 20, 20px;
	background-color: rgb(40, 40, 40);
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
}
.tool_tip {
	background-color: rgb(92, 92, 92);
	color: white;
	font: bold 12px Helvetica;
	border-bottom: 1px outset;
}
footer {
	color: white;
	font: bold 12px Helvetica;
	border-bottom: 1px outset;
}
.tooltip_status {
	padding-top: 12px;
}
.btn_ctr_alt_del {
	position: fixed;
	top: 8px;
	right: 5px;
	border: 1px outset;
	cursor: pointer;
	padding: 5px;
}

#screen {
	flex: 1; /* fill remaining space */
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}
</style>